原生js进阶教程（六）

2023-03-20 22:25| 来源: 网络整理| 查看: 265

CSS3和Less一、认识移动端二、HTML5新增的标签三、认识lessless是什么？less和css的区别：使用less1. 修改link标签的rel属性2. 引入编译js的文件less语法1. less中的变量2. less 中的嵌套语法四、css3中新增特性五、CSS3过渡动画transition属性六、CSS3变形动画七、关键帧动画

珠峰培训，专注前端

CSS3和Less

一、认识移动端原生App

直接运行在操作系统中的应用；智能手机、平板等，目前移动设备两大系统平台： IOS：Object-c (OC) Android：java

原生APP的优势：

运行流畅，所有的资源都在安装包里，下载安装一次，永久可用；

劣势：

可移植性差，不能跨平台，IOS的app只能在IOS运行，Android的app只能在Android系统跑；时效性差，升级与否决定权在用户手里，如果用户不升级，你做的新功能用户永远不会用； web App

在浏览器中的HTML5的页面时运行、app里面内嵌的webkit内核； h5的页面如果需要调用摄像头，通讯录、重力感应器… 需要通过浏览器去调用这些功能；

WebApp 的优点开发效率高没有平台限制服务供应商拥有更新主动权 Hybrid App：原生app中中嵌 webview(类似浏览器的东西)，业务功能使用html+js完成；

移动端是指运行在移动设备浏览器（或webview）中的h5页面；在移动端没有IE浏览器的兼容性问题，可以使用新技术移动端开发需要我们掌握：

html5新特性css3新特性移动端的事件、常用库本地存储localStoragegeolocationwebsocket

二、HTML5新增的标签 HTML 超文本标记语言XHTML: 更加严谨的标记语言，例如双标签必须闭合、单标签必须使用/ 自闭合，行内属性必须小写、属性值必须使用双引号等。。。XML 可扩展标记语言

HTML5 在HTML4的基础上新增了很多标签

常用的html标记

块级元素：div p h1-h6 ul li ol table form .. 行内：span a label i br 行内块：input img button

h5为了增强标签的语义化，新增了一些标签

header 头nav 导航section 块footer 底部figure 图片figcation: 图片描述article 文章mark 高亮audio 音频video 视频….

标签语义化有利于SEO

三、认识less

less是什么？

less是CSS预编译语言，类似的还有 sass styluss等；

less和css的区别：

css 是标记语言，不是编程语言，没有类、示例、函数、变量，开发效率低，可复用和可维护性差；而less等预编译语言就是让css具备面向对象编程思想，有变量、有函数、有作用域，是浏览器不能识别和渲染less代码，需要我们把less代码先编译为正常css后，再交给浏览器进行解析渲染。

使用less

1. 修改link标签的rel属性

把link标签中的rel属性又stylesheet改为stylesheet/less

2. 引入编译js的文件开发环境编译，只需要引入编译less的js文件即可

实际项目中我们使用webpack、gulp或者grunt等打包工具中的less编译等功能在打包的时候自动打包并且插入到页面中；

less语法

原来的css：

.box { width: 200px; height: 200px; background: skyblue;}.box a { color: red;}

改写成less

.box { .centerPos(200, 200); width: 200px; height: 200px; background: skyblue; a { color: red; }}

1. less中的变量 less 变量：

存储值代表值，以后再用这个值，使用这个变量即可，如果以需要修改，只需要修改这个变量，那么所有用到这个变量的时候只要用到这个就改了；

声明一个变量：

语法： @变量名

@bg-src:"../img/"; /*使用图片资源变迁引入变量存储，以及拼接*/@link-color: #000; /* 可以使用 - */@wid: 200px;/*使用变量*/a { color: @link-color; width: @wid; background: url("@{bg-src}1.jpg") no-repeat center;}

2. less 中的嵌套语法 less中使用嵌套表示层级；html代码如下

less代码

.outer { .inner { .center { a { } } }} 在less的嵌套语法中使用 &表示花括号外面的选择器后面紧跟着XX

.pub {

.bg { /*.pub .bg 后代选择器*/}& > .bg { /*.pub > .bg 子级选择器*/}&.bg { /*.pub.bg 交集选择器*/}&:hover { /*.pub:hover 使用伪类*/}

}

less 嵌套会形成作用域 @width: 100px;/*嵌套语法，& 使用*/.pub { @width: 200px; .bg { width: @width; /*.bg最终的width使用的200px*/ }} less 中使用函数

less中可以声明函数

.transition(@property: all, @duration: .5s, @timing-function: linear, @delay: 0s) { transition: @arguments;}.cc { .transition; /*啥也不传时使用默认值*/ .transition(@duration: 1s); /*只修改duration*/}

四、css3中新增特性 border-radius .box { border-radius: 50%;} box-shadow: h v blur spread color inset; h 阴影水平偏移值v 阴影竖直偏移值blur 模糊尺寸（可选）spread 阴影尺寸（可选）color 阴影颜色（可选）inset 内置阴影（可选） .box { box-shadow: 5px 5px 10px 10px #000;} text-shadow: h-shadow v-shadow blur color; .box { text-shadow: 5px 5px 10px #000;} background-size: 值如下 100px 100px 具体值100% 100% 宽高百分比（相对于所在容器）cover 以合适的比例把图片整个容器覆盖，但是容器不一定漏出整个图片contain 保证图片纵横比例不变铺满容器的尺寸较小一个方向，另一边根据图片综合比例计算（当一边铺满后，另一边不一定铺满） background-clip: 值如下 border-box 裁切到边框padding-box 裁切到paddingcontent-box 裁切到内容区域text 只填充文本（需要-webkit）

五、CSS3过渡动画 .box { background: #00b38a; width: 200px; height: 200px; transition: all .5s linear 0s; } #box:hover { width: 300px; height: 300px; }

transition属性

transition: all .5s linear 0s;

transition是一个合成属性，有以下属性合成：

transition-property: 要过渡的属性，默认alltransition-duration: 过渡时间transition-timing-function: 过渡效果，默认lineartransition-delay: 动画延迟时间

六、CSS3变形动画

CSS3的变形动画需要设置transform属性

transform: skew(0, 45deg);

常见的效果有，可以组合使用：

scale: 缩放translate: 平移rotate: 旋转skew: 倾斜

transform-origin: 设置旋转动画的中心点位置；

水平： left center right竖直：top center bottom*

示例：

#box:hover { width: 300px; height: 300px; transform: scale(2, 0.5);} #box:hover { width: 300px; height: 300px; transform: translate(100px, 100px); }#box:hover { width: 300px; height: 300px; transform:rotate(360deg);}#box:hover { transform: skew(0, 45deg);}

七、关键帧动画

CSS3中使用 @keyframes 定义关键帧动画，使用animation属性调用；

html代码：

CSS定义关键帧动画：

@keyframes shake { 0% { transform: rotate(45deg); } 25% { transform: rotate(-0deg); } 50% { transform: rotate(-45deg); } 75% { transform: rotate(0deg); } 100% { transform: rotate(45deg); }}

调用关键帧动画：

.box { width: 120px; height: 300px; background: url(clock.png) no-repeat; margin: 20px auto; transform-origin: center top; /*设置旋转元素的基点位置*/ animation: shake 2s linear 0s infinite; /*调用关键帧动画*/}

animation属性详解： animation是一个合成属性，由以下属性合成：

animation-name: 运动轨迹名称 @keyframes 定义一个轨迹名称animation-duration: 运动轨迹运动时间animation-timing-function: 运动效果 (linear ease-in ease-out..)animation-delay: 延迟时间animation-iteration-count: 动画执行次数，默认1，infinite 无数次

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】

【本文地址】

原生js进阶教程（六）

原生js进阶教程（六）

今日新闻

推荐新闻